<template>
  <div class="main">
    <div class="up">
      <div class="included">
        <div class="name">包含的设备</div>
        <el-table
          ref="multipleTable"
          :data="tableData2"
          style="overflow: hidden;;"
          @selection-change="handleSelectionChange"
          fit="false"
         
          
        >
          <el-table-column type="selection" min-width="15"> </el-table-column>
          <el-table-column type="index" min-width="20"> </el-table-column>
          <el-table-column prop="deviceNumber" label="设备号" min-width="30">
          </el-table-column>
          <el-table-column prop="deviceName" label="设备名称" >
          </el-table-column>
        </el-table>
        <div class="bottomButton">
          <button>设备定位</button>
        </div>
      </div>
      <div class="unincluded">
        <div class="name">没包含的设备</div>
        <el-table
          ref="multipleTable"
          :data="tableData3"
          style="overflow: hidden;"
          @selection-change="handleSelectionChange"
          fit="false"
         
          
        >
          <el-table-column type="selection" min-width="15"> </el-table-column>
          <el-table-column type="index" min-width="20"> </el-table-column>
          <el-table-column prop="deviceNumber" label="设备号" min-width="30">
          </el-table-column>
          <el-table-column prop="deviceName" label="设备名称" >
          </el-table-column>
        </el-table>
        <div class="bottomButton">
          <button>设备定位</button>
        </div>
      </div>
    </div>
    <div class="bottom">
      <button v-for="(item, index) in fourButton" :key="index" @click="change">
        {{ item }}
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const fourButton = ref(["上移", "下移", "置顶"]);
const change = () => {
  console.log(item, "item");
};
const tableData1 = ref([
  {
    groupName: "上课铃",
  },
  {
    groupName: "下课铃",
  },
  {
    groupName: "广播体操铃",
  },
]);
const tableData2 = ref([
  {
    deviceName: "一号设备",
    deviceNumber: "11",
  },
  {
    deviceName: "二号设备",
    deviceNumber: "22",
  },
  {
    deviceName: "三号设备时",
    deviceNumber: "33",
  },
]);
const tableData3 = ref([
  {
    deviceName: "一号设备",
    deviceNumber: "11",
  },
  {
    deviceName: "二号设备",
    deviceNumber: "22",
  },
  {
    deviceName: "三号设备",
    deviceNumber: "33",
  },
]);
</script>
<style lang="less" scoped>
@import url('./componentsless/screening.less');
</style>